<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>找回密码</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui2.6/css/layui.css"/>

</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>修改密码</legend>
</fieldset>

<form class="layui-form" action=""  style="display: inline-block;margin-left:430px;margin-top:40px;">

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline">
        <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入手机号" id="j_phone" style="border-radius:5px;"class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" id="VerifyCode" name="number" style="border-radius:5px;" lay-verify="required|number" placeholder="请输入验证码" class="layui-input" style="display:inline-block;">
    </div>
    <div class="layui-form-mid layui-word-aux getverify-code-btn" id="j_getVerifyCode">获取验证码</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密 码：</label>
    <div class="layui-input-inline">
      <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" style="border-radius:5px;" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type='button' class="layui-btn" lay-submit="" value="立即提交" style="padding:0 12px;background-color:#FABB42;" lay-filter="btnSave">
      <input type='button' class="layui-btn"  value="返回登录页" onclick="javascrtpt:window.location.href='../login.html'"  style="padding:0 12px;background-color:#FABB42;" lay-filter="btnSave" >
      <input type="reset" class="layui-btn layui-btn-primary" style="padding:0 12px;">
    </div>
  </div>
</form>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../layui2.6/layui.js"></script>
<script type="text/javascript" src="../js/md5.js"></script>
<script type="text/javascript" src="../js/TimerButton.js"></script>

<script>
    $(function (){
        var btn = $("#j_getVerifyCode");
        timerButton.verify("#j_getVerifyCode", {
            time: 60,//倒计时时间
            event: "click",//事件触发方式
            condition: function () {
                var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
                    flag = phoneReg.test($("#j_phone").val());
                if(!flag){
                    alert("电话号码填写不正确！");
                    return false;
                }
                return true;
            },
            unableClass: "unabled",//按钮不能使用时的class
            runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
            timeUpText: "重新获取",//时间到了时按钮显示的文字
            progress: function (time) {//计时正在进行中时的回调
                btn.html(time + " s后重新获取");
            },
            timeUp: function (time) {//计时结束时执行的回调
                btn.html("重新获取");
                console.log("时间到了！");
                console.log(this);//这里的this指向按钮
            },
            eventFn: function () {//事件执行后的回调
                console.log("执行了");
//获取验证码
                $.ajax({
                    url : '../../verifyCode',
                    type : 'post',
                    dataType : 'json',
                    data : {"tel":$("#j_phone").val()},
                    success : function(result) {
                        console.log(result);
                   var  verify_code=result.code;
                        console.log(verify_code);
                        localStorage.setItem('verify_code',verify_code);
                        return false;
                    },
                    error:function(result){
                        console.log(result);
                        return false;
                    }
                });


            }
        });
    });
              layui.use(['jquery','form', 'layedit'], function(){
                    var  $ = layui.jquery;
                        form = layui.form;
                        layer = layui.layer;

                              var params={};
                          //自定义验证规则
                          form.verify({
                              phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']
                              ,pass: [/^[\w]{6,12}$/, '密码必须6到12位']
                          });

                          form.on('submit(btnSave)', function(data){
                              console.log(data.elem)
                              console.log(data.form)
                              console.log(data.field);

                              var formData = data.field;
                              $.extend(formData, { phone: $("#tel").val() ,password:$("#pwd").val()});
                              console.log(formData);
                              params.phone = formData.phone;
                              params.password = hex_md5(formData.password);
                              console.log(params.password);

                              var code = $("#VerifyCode").val();
                                  console.log(code);
                              var verify_code = localStorage.getItem('verify_code');
                                  console.log(verify_code);

                              if( verify_code == code ){

                              $.ajax({
                                  url: '../../resetPwd',
                                  type: "POST",
                                  dataType: "JSON",
                                  data:{
                                      phone:params.phone,
                                      password:params.password
                                  },
                                  success: function (result) {
                                      console.info("保存数据成功，返回的数据为：↓ ");
                                      console.info(result);
                                      alert('重置成功');
                                      return false;
                                  },
                                  error: function (response) {
                                      console.log(response);
                                      alert('重置失败');
                                      return false;
                                      if (response.resultCode == '001') {
                                          console.log("param is not found");
                                      }
                                  }
                              });
                              }else{
                                  alert("验证码不正确,请重新输入");
                              }
                          });

                      });
        </script>

        </body>
        </html>